import * as echarts from 'echarts'

/**
 * 折现阴影图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useLineAreaColorCharts = (el, params) => {
  const myChart = echarts.init(el)
  const option = {
    color: ['#1890FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      show: true,
      data: params?.lengendData || [],
      textStyle: { fontSize: 12, color: '#000' },
      itemWidth: 12,
      itemHeight: 12,
      itemGap: 15,
    },
    grid: {
      left: '3%',
      right: '6%',
      bottom: '3%',
      top: '10%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: params?.xAxisData || [],
        boundaryGap: false,
        axisTick: {
          show: true // 不显示坐标轴刻度线
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#B5B5B5',
          },
        },
        splitLine: {
          lineStyle: {
            // 使用深浅的间隔色
            color: ['#B5B5B5'],
            type: 'dashed',
            opacity: 0.5,
          },
        },
        axisLabel: {
          color: "#000",
          fontSize: 16
        }
      }
    ],
    yAxis: [
      {
        name: params.yAxisName,
        nameTextStyle: {
          verticalAlign: 'middle',
          align: "right"
        },
        type: 'value',
        //y右侧文字
        axisLabel: {
          color: '#000',
          fontSize: 16
        },
        // y轴的分割线
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(0, 0, 0, 0.10)',
          }
        }
      }
    ],
    series: [
      {
        name: params?.seriesName || '',
        type: 'line',
        smooth: true,
        symbol: 'none', // 不显示连接点
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        lineStyle: {
          width: 3,
          shadowColor: "#1890FF",
          shadowBlur: 20
        },
        areaStyle: {
          opacity: 1,
          //右下左上
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(24, 144, 255, .5)'
            },
            {
              offset: 0.3,
              color: 'rgba(24, 144, 255, 0.2)'
            },
            {
              offset: 1,
              color: 'rgba(24, 144, 255, 0)'
            }
          ])
        },
        data: params?.seriesData || []
      }
    ]
  }
  option && myChart.setOption(option)
}
